<template>
  <div>
    <div>
      <el-tag size="small">{{action.event | filterEvent}}</el-tag>
      {{action.actionType | filterActionType}}
    </div>
    <p>
      <el-tag v-if="action.url" size="small" type="info" style="display: block;width: 100%">{{action.url}}</el-tag>
    </p>

  </div>
</template>
<script>
  import Style from "../designer/components/panel/style";
  import actionMgr from './actionMgr'

  export default {
    components: {Style},
    props: {
      action: {
        type: Object
      }
    },
    data() {
      return {}
    },
    filters: {
      filterEvent(val) {
        return {
          'click': '单击'
        }[val]
      },
      filterActionType(val) {
        const comp = actionMgr.list.find(type => type.name === val);
        if (comp) {
          return comp.title;
        }
        return '';
      }
    },
    created() {
      this.actionTypeList = actionMgr.list;
    }
  }
</script>
<style scoped>
  div {
    font-size: 14px;
  }
</style>
